import React,{useEffect,useState} from 'react'
import {useHistory } from 'react-router-dom'
import Swiper from 'swiper'
import "swiper/css/swiper.css"
import LazyLoad from '../../utils/lazyLoad'
//接口
import { getIndexNav, getRankList, getCarouselList, getDataList } from '../../server/home'
//接口参数
import { INavItem, ICarouselItem, IRankItem, videoData } from '../../utils/interface'
import './index.scss'

const Index: React.FC = () => {
  let [list, setList] = useState<INavItem[]>([]);
  let [carouseList, setcarouseList] = useState<ICarouselItem[]>([]);
  let [rankList, setRankList] = useState<IRankItem[]>([]);
  let [videoData, setVideoList] = useState<videoData[]>([])
  let [carIndex, setCarindex] = useState<number>(0)
    
    useEffect(() => {
      //头部导航
      getIndexNav().then(res => {
          setList(res.data.rankCategoryList);
      })
      //轮播图
        getCarouselList().then(res => {
          setcarouseList(res.data.carouselList);
      })
      //导航
      getRankList().then(res => {
          setRankList(res.data.dataList);
      })
      //视频
      getDataList().then(res => {
          setVideoList(res.data.dataList)
      })
    }, []);

    useEffect(()=>{
        if (carouseList.length && rankList.length){
            new LazyLoad();
        }
    }, [carouseList, rankList])

    //实例化内容轮播
    useEffect(()=>{
        let mySwiper=new Swiper('.swiper-container',{
            on:{
                slideChange: function () {
                    let scl = document.querySelector(".Nav")
                    if (carIndex >= 4) {
                        let num = (carIndex - 3) * 80;
                        (scl as Element).scrollLeft = num
                    }
                    if(carIndex<4){
                        (scl as Element).scrollLeft = 0
                    }
                    setCarindex((this as { activeIndex: number }).activeIndex)
                    //console.log('改变了，activeIndex为'+(this as { activeIndex: number }).activeIndex)
                    //改变了，activeIndex为1
                  }
            }
        })
        mySwiper.slideTo(carIndex,100,false)
    }, [carIndex])
    //实例化轮播图
    useEffect(() => {
        setTimeout(() => {
            new Swiper ('.swiper-containers', {
                autoplay:true,
                loop: true, // 循环模式选项
              })  
        }, 1000);
    },[])
  //头部导航点击事件
  function clickNav(e: React.MouseEvent) {
        if(e.target!==e.currentTarget){
            let num=parseInt((e.target as HTMLElement).dataset.index||'0')
            setCarindex(num)
        }
    }
    let history = useHistory();
  //跳转搜索页
    function goSearch(e: React.MouseEvent) {
         if (e.target!==e.currentTarget) {
            history.push('/search')
         }

    }
   //分类详情页
    function goDetail(e: React.MouseEvent) {
        if (e.target !== e.currentTarget) {
            let obj = (e.target as HTMLElement).dataset.items
            history.push({
                pathname: "/mydetail",
                state:JSON.parse(obj)
            })
         }
       
   } 
    return <div className="index">
        {/* 点击跳转搜索页面 */}
        <section className="search" onClick={goSearch}>
            <span>搜索你想知道的一切排名~</span>
        </section>
      {/* 顶部导航 */}
      <section onClick={clickNav} className="Nav">{
          list.map((item,index) => {
              return <li key={index} className={carIndex === index ? 'active' : ''} data-index={index}>
                        {item.name}
                    </li>
          })
        }</section>
        
      <div className="swiper-container">
            <div className="swiper-wrapper">
              <div className="swiper-slide">
                    {/* 当前分类轮播图 */}
                    <section className="banner">{
                        <div className="swiper-containers">
                                <div className="swiper-wrapper">
                                    {
                                        carouseList.map(item => {
                                            return <div className="swiper-slide"  key={item.title}>
                                                <img data-src={item.image} key={item.title} alt="" />
                                            </div>
                                        })
                                    }
                            </div>
                        </div>
                    }</section>
                    {/* 当前分类 */}
                    <section className="navigation"  onClick={goDetail}>{
                        rankList.map((item) => {
                            return <li key={item.id}>
                                <img data-src={item.image} alt=""  data-items={JSON.stringify(item)} />
                                <span data-items={JSON.stringify(item)}>{item.name}</span>
                            </li>
                        })}
                    </section>
                    {/* 视频 */}
                    <section className="video">
                        {
                        videoData.map(item => {
                            return <li key={item.id}>
                                <img data-src={item.image} alt="" />
                                <span>{item.title}</span>
                            </li>
                        })
                        }
                    </section>
              </div>
              <div className="swiper-slide">
                    <section className="navigation">{
                        rankList.map(item => {
                            return <li key={item.id}>
                                <img data-src={item.image} alt="" />
                                <span>{item.name}</span>
                            </li>
                        })}</section>
              </div>
              <div className="swiper-slide">
                <section className="video">
                    {
                    videoData.map(item => {
                        return <li key={item.id}>
                            <img data-src={item.image} alt="" />
                            <span>{item.title}</span>
                        </li>
                    })
                    }
                </section>
              </div>
              <div className="swiper-slide">Slide 4</div>
              <div className="swiper-slide">Slide 5</div>
              <div className="swiper-slide">Slide 6</div>
              <div className="swiper-slide">Slide 7</div>
              <div className="swiper-slide">Slide 8</div>
              <div className="swiper-slide">Slide 9</div>
              <div className="swiper-slide">Slide 10</div>

            </div>
      </div>
      

  </div>
}
export default Index